<style lang="less" scoped>
	@border-color:#E3E8EA;//边框颜色
	@font-color:#686E71;//正常字体颜色
	@primary-color:#FE9333;//橘黄色默认颜色
    body,html{
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
    }
    .leftCenter{
        position: absolute;
        width: 240px;
        height: 100%;
    }
    .rightCenter{
        position: absolute;
        width: 87.5%;
        min-width: 1000px;
        left: 240px;
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;   
        .title{
            width: 100%;
            height: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            text-align: center;
            margin-bottom: 10px;
            span{
                line-height: 46px;
                display: inline-block;
                margin-right: 60px;
                font-size: 14px;
                cursor: pointer;
            }
            .on{
                color:@primary-color;
                border-bottom: 2px solid @primary-color;
            }
        }
        .info{
            width: 100%;
            padding: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            .findPassword{
                width: 460px;
                min-height: 650px;
                margin: 0 auto;
                Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    font-size: 16px;
                    margin-left: 155px;
                }
                              
            }
            // 实名认证
            .identification{
                width: 780px;
                min-height: 650px;
                margin: 0 auto;
                .form{
                    width: 780px;
                    .showImg{
                        width: 250px;
                        height: 170px;
                        display: inline-block;
                        vertical-align: top;
                        position: relative;
                        border-radius: 4px;
                        .img{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;     
                            img{
                                max-height: 100%;
                                max-width: 100%; 
                            }   
                                           
                        }
                        p{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            background-color: rgba(0,0,0,0.6);
                            color: #fff;
                            line-height: 30px;
                            height: 30px;
                            width: 100%;
                            text-align: center;
                            display: none;
                            span{
                                cursor: pointer;
                            }
                            .change{
                                 float: right;
                                margin-right: 30px;
                            }
                            .del{
                                float: right;
                                margin-right: 30px;
                            }
                        }
                    }
                    .showImg:hover{
                        p{
                            display: block;
                        }
                    }
                    .showPop{
                        width: 430px;
                        display: inline-block;
                        padding: 14px;
                        line-height: 24px;
                        vertical-align: top;
                        background-color: #FFFAF6;
                        color: #FE9333 ;
                        font-size: 14px;
                        border: 1px solid #FEE0C5;
                        border-radius: 4px;                        
                        margin-left: 18px;
                        
                    }
                }
                 Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    margin-left: 315px;
                    font-size: 16px;
                }
            }
        }
    }
</style>
<style lang="less">
    
    .findPassword{
        font-size:14px;
        .ivu-form-item{
            margin-right:0px;
            margin-bottom:24px;
             .ivu-form-item-label:before{
                display:none;
            }
        }        
        .ivu-form-item-label{
            font-size:14px;
            color:#686E71;
        }
        .ivu-input{
            height:40px;
            width: 380px;
        }    
        .yzm{
            .ivu-input-wrapper{
                width: 240px;
                margin-right:10px;
            }
            .ivu-input{
                height:40px;
                width: 240px;
            } 
        }
    }
    .identification{
       
         font-size:14px;
        .ivu-form-item{
            margin-right:0px;
            margin-bottom:24px;
             .ivu-form-item-label:before{
                display:none;
            }
        }        
        .ivu-form-item-label{
            font-size:14px;
            color:#686E71;
            padding: 13px 22px 13px 0;
        }
        .ivu-input{
            height:40px;
            line-height:40px;
            width: 250px;
        } 
    }
    .ivu-modal-confirm-body{
        padding-left: 0;
    }
</style>

<template>
	<div>
        <!--左侧个人导航-->
        <v-userCenter class="leftCenter" :li1="li1" :li2="li2" :li3="li3" :li4="li4" :headerPicture="headerPicture" :username="username"></v-userCenter>
        <!--右侧内容-->
        <div class="rightCenter">
            <!--标题-->
            <div class="title">
                <span :class="jcdataClass" @click="chooset1()">修改密码</span>
                <span :class="threebing" @click="chooset2()" >实名认证</span>
            </div>
            <!--修改密码-->
            <div class="info" v-show="t1t2">
                <div class="findPassword">
                    <Form ref="formFindPas" :model="formFindPas" :rules="formFindPasRule" label-position="right" :label-width="78"  inline>                       
                         <Form-item label="旧密码" prop="oldPswod">
                            <Input v-model="formFindPas.oldPswod" placeholder="请输入您的旧密码" type="password" :maxlength="20"></Input>
                        </Form-item>
                        <Form-item label="新密码" prop="newPswod">                        
                            <Input v-model="formFindPas.newPswod" type="password" placeholder="请输入您的新密码" :maxlength="20"></Input>
                        </Form-item>
                        <Form-item label="确认密码"  prop="newPswod2">
                            <Input v-model="formFindPas.newPswod2" type="password" placeholder="请再次输入您的新密码" :maxlength="20"></Input>
                        </Form-item>
                        <Form-item label="验证码" class="yzm" prop="yzm">                           
                           <Input v-model="formFindPas.yzm" placeholder="请输入验证码" type="text" :maxlength="5"></Input><img  :src="'data:image/png;base64,'+yzmimg" alt="" @click="getYzm()" style="width:130px;height:40px;vertical-align:middle;cursor:pointer;" class="yzmimg">                    
                        </Form-item>
                    </Form>
                    <Button type="warning" @click="xgPsword('formFindPas')">确认提交</Button>
                </div>
            </div>
            <!--实名认证-->
            <div class="info" v-show="!t1t2">
                <div class="identification">
                    <Form ref="identification" :model="identification" :rules="identificationRule" label-position="right" :label-width="78" class="form" >
                        <Form-item label="身份证号" prop="idcard" >
                            <Input v-model="identification.idcard" placeholder="请输入您的身份证号" :maxlength="18" :disabled="(certificeStatus == 1 || certificeStatus == 2)"></Input>
                        </Form-item>
                        <Form-item label="真实姓名" prop="names" >
                            <Input v-model="identification.names" placeholder="请输入您的真实姓名" :maxlength="10" :disabled="(certificeStatus == 1 || certificeStatus == 2)"></Input>
                        </Form-item>
                        <Form-item label="证件正面">
                            <!---->
                            <div class="showImg">
                                <div class="img">
                                    <img :src="  !hasZm ? imgurl + zmPhoto :staticimg+'/images/idcard.png'"/>
                                </div>
                                <!--上传照片-->
                                <p v-show="hasZm && (certificeStatus == 0 || certificeStatus == 3)">
                                    <Upload  :on-success="handleSuccess"
                                    :format="['jpg','jpeg','png']"
                                    :on-format-error="uploadPhotoError" 
                                    :show-upload-list="false" :action="hotsimg+'/account/uploadCertificate'" :headers="tokendata" name="certificate">
                                        <span @click="submitZm()">立即上传</span>                                       
                                    </Upload>   
                                </p>
                                <p v-show="!hasZm && (certificeStatus == 0 || certificeStatus == 3)">
                                    <span class="del" @click="delZm()">删除</span>
                                     <Upload  :on-success="handleSuccess" 
                                     :format="['jpg','jpeg','png']"
                                     :on-format-error="uploadPhotoError"
                                     :show-upload-list="false" :action="hotsimg+'/account/uploadCertificate'" :headers="tokendata" name="certificate">
                                        <span class="change">重新上传</span>                                                                            
                                    </Upload>   
                                </p>
                            </div>
                            <!--提示语-->
                            <div  class="showPop">
                                手持证件照正面图片要求：<br />
                                1. 该信息仅用于管理员审核使用,身份信息将完全保密<br />
                                2. 请上传彩色二代身份证照片<br />
                                3. 身份证信息需清晰可见无遮挡<br />
                                4. 身份证有效期在一个月以上<br />
                                5. 支持JPEG、PNG格式，文件需小于5M<br />
                            </div>
                        </Form-item>
                        <Form-item label="证件背面">                           
                            <!---->
                            <div class="showImg">
                                <div class="img">
                                    <img :src=" !hasFm ? imgurl+bmPhoto :staticimg+'/images/idcard2.png'" />
                                </div>                                
                                <!--上传照片-->
                                <p v-show="hasFm && (certificeStatus == 0 || certificeStatus == 3)">
                                    <Upload  :on-success="handleSuccessBm" 
                                    :format="['jpg','jpeg','png']"
                                    :on-format-error="uploadPhotoError"
                                    :show-upload-list="false" 
                                    :action="hotsimg+'/account/uploadCertificate'" 
                                    :headers="tokendata"
                                     name="certificate">
                                        <span>立即上传</span>                                       
                                    </Upload>
                                </p>
                                <p  v-show="!hasFm && (certificeStatus == 0 || certificeStatus == 3)">
                                    <span class="del" @click="delBm()">删除</span>
                                    <Upload  :on-success="handleSuccessBm" 
                                    :format="['jpg','jpeg','png']"
                                    :on-format-error="uploadPhotoError"
                                    :show-upload-list="false" 
                                    :action="hotsimg+'/account/uploadCertificate'"
                                     :headers="tokendata"
                                      name="certificate">
                                        <span class="change">重新上传</span>                                                                       
                                    </Upload>
                                </p>
                            </div>
                            <!--提示语-->  
                            <div  class="showPop">
                                证件照反面图片要求：<br />
                                1. 证件背面全部信息清晰无遮挡。<br />
                                2. 身份证有效期在一个月以上。<br />
                            </div>                     
                        </Form-item>
                    </Form>
                    <Button type="warning" @click="submitSh('identification')" v-if="certificeStatus == 0 || certificeStatus == 3">{{buttonTxt}}</Button>
                    <Button disabled v-else style="box-shadow:none;">{{buttonTxt}}</Button>
                </div>
            </div>
        </div> 

	</div>
</template>
<script>
    import global from '../../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    import { mapActions } from 'vuex'
    import { USER_SIGNOUT } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
        data() {
            const validatePass = (rule, value, callback) => {//验证找回密码第三步两次密码输入情况
                if (value === '') {
                    callback(new Error('请输入密码'));
                }else if(!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/.test(value))){
                    callback(new Error('请输入6-20位数字与字母组合的密码'));
                }else {
                    if (this.formFindPas.newPswod2 !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formFindPas.validateField('newPswod2');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {//验证找回密码第三步两次密码输入情况
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                }else if(!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/.test(value))){
                     callback(new Error('请输入6-20位数字与字母组合的密码'));
                }else if (value !== this.formFindPas.newPswod) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            const idcardvalidate = (rule, value, callback)=>{
                var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                if(!regIdCard.test(value)){
                    callback(new Error('请输入正确的身份证号'));   
                }else{
                     callback();
                }
            };
            const idnamevalidate = (rule, value, callback)=>{
                var realName = /^([\u4e00-\u9fa5]+|([a-z]+\s?)+)$/;
                if(!realName.test(value)){
                    callback(new Error('请输入正确姓名'));   
                }else{
                     callback();
                }
            };

			return {
                imgurl:global.imgurl,
                staticimg:global.staticimg,
				videourl:global.videourl,
				musicurl:global.musicurl,
                formRight:"",
                province:"",
				city:"",
				district:"",
				provinceList:[],
				cityList:[],
				districtList:[],
                animal:"",
                jcdataClass:"on",//基础信息class名字
                threebing:"",//第三方绑定class名字
                t1t2:true,//切换
                li1:"li1 ",
                li2:"li2 on2",
                li3:"li3",
                li4:"li4",
                hotsimg:"",//图片路径前缀
                yzmimg:"",
                yzmid:"",
                hasZm:true,
                hasFm:true,
                formFindPas:{//找回密码表单
                    oldPswod:"",
                    newPswod:"",
                    newPswod2:"",
                    yzm:"",
                },
                identification:{//实名认证表单
                    idcard:"",
                    names:"",

                },
                formFindPasRule:{//找回密码表单验证
                    oldPswod:[
						{ required: true, message: '请输入您的旧密码', trigger: 'blur' },
					],
                    newPswod:[
                        { validator: validatePass, trigger: 'blur' }	
                    ],
                    newPswod2:[
                         { validator: validatePassCheck, trigger: 'blur' }	
                    ],
                    yzm:[
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ]
                },
                identificationRule:{//实名认证  表单验证
                    idcard:[
                        // { required: true, message: '请输入您的身份证号', trigger: 'blur' },
                        { validator : idcardvalidate, trigger: 'blur' },
                    ],
                    names:[
                         { required: true, message: '请输入您的姓名', trigger: 'blur' },
                         { validator : idnamevalidate,  trigger: 'blur' },
                    ]
                },
                tokendata:"",
                zmPhoto:"",//正面照片
                bmPhoto:"",//背面照片
                headerPicture:"",
                username:"",
                buttonTxt:"",
                certificeStatus:0,
                
			}
		},
        created() {
			this.ajax();
            this.getYzm();
            if(localStorage.getItem('headerImg') != null){
                this.headerPicture = localStorage.getItem('headerImg');     
            }
            if(localStorage.getItem('nickname') != null){
                this.username = localStorage.getItem('nickname');     
            }
		},
        watch:{
			
		},
		methods: {
            ajax(){
                 this.hotsimg = global.host;
                 this.tokendata={"Authorization":this.user.token_type+" "+this.user.access_token}
            },
            chooset1(){//基础信息
                // this.$refs['identification'].resetFields();//清空验证     
                this.jcdataClass = "on";
                this.threebing = "";
                this.t1t2 = true;
            },
            chooset2(){//基础信息
                // this.$refs['formFindPas'].resetFields();//清空验证               
                this.jcdataClass = "";
                this.threebing = "on";
                this.t1t2 = false;  
                this.$http.get(global.host+'/account/getRealNameCertificationInfo',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.certificeStatus = response.body.account.certificeStatus;
                    this.identification.names = response.body.account.realName;
                    this.identification.idcard = response.body.account.cardNo;        
                    this.zmPhoto = response.body.account.cardPositivePhotos;
                    this.bmPhoto = response.body.account.cardOppositePhotos;
                    if(response.body.account.certificeStatus == 0){//未提交状态
                        this.buttonTxt = "提交审核";
                    }else if(response.body.account.certificeStatus == 1){//待审核
                        this.hasZm = false;
                        this.hasFm = false;
                        this.buttonTxt = "正在审核";
                    }else if(response.body.account.certificeStatus == 2){//审核成功
                        this.hasZm = false;
                        this.hasFm = false;
                        this.buttonTxt = "审核成功";
                    }else if(response.body.account.certificeStatus == 3){//审核失败
                        this.hasZm = false;
                        this.hasFm = false;
                        this.buttonTxt = "重新提交";
                     }                     
                                       
				})
				.catch(function (response) {
					
				});
            
            },
            getYzm(){
                this.$http.get(global.host+'/unsecured/graphics/validate/code/get',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {	
                    if(response.body.status == 1){
                        this.yzmimg = response.body.validateCode;
                        this.yzmid = response.body.graphicsValidateKey;
                    }
                })
                .catch(function (response) {
                    
                });
            },
            ...mapActions([USER_SIGNOUT]),
            xgPsword(name){//修改密码
                this.$refs[name].validate((valid) => {
                    if(valid){
                        this.$http.post(global.host+'/account/updatePassword',{"oldPassword":this.formFindPas.oldPswod,"password":this.formFindPas.newPswod,"confirmPassword":this.formFindPas.newPswod2,"authCode":this.formFindPas.yzm,"graphicsValidateKey":this.yzmid},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {	
                            if(response.body.status == 0){
                                this.$Message.error(response.body.message);
                            }else{
                                this.$Modal.success({
                                    width:"320",
                                    content: "<p>密码修改成功,请重新登录</p>",
                                    cancelText:" ",
                                    onOk: () => {
                                       this.USER_SIGNOUT();
						               this.$router.push({ path: '/index' });//跳转传记页面
                                    },                                   
                                });
                            }
                        })
                        .catch(function (response) {
                            
                        });
                    }else{
                        this.$Message.error('信息有误!');
                    }
                });
            },
            submitSh(name){//提交审核
                this.$refs[name].validate((valid) => {
                    console.log(valid);
                     if(valid){
                         this.$Modal.confirm({
                            width:"320",
                            content: "<p>实名信息是您权利的保证，提交后不可修改，请确保资料正确性。</p>",
                            onOk: () => {
                                this.$http.post(global.host+'/account//realNameAuthentication',
                                {
                                    "realName":this.identification.names,
                                    "cardNo1":this.identification.idcard,
                                    "cardPositivePhotos":this.zmPhoto,
                                    "cardOppositePhotos":this.bmPhoto,
                                },
                                {headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                                .then((response) => {	
                                    if(response.body.status == 1){
                                        this.$Message.success('提交审核成功!');                    
                                        this.chooset2();
                                    }else{
                                        this.$Message.error(response.body.message);
                                    }
                                })
                                .catch(function (response) {
                                    
                                });                 
                            },
                            onCancel: () => {
                            }
                        });
                        
                     }
                });
            },
            handleSuccess(res, file){//照片上传图片
                this.zmPhoto = file.response.fileName;
                this.hasZm = false;
            },
            handleSuccessBm(res, file){
                this.bmPhoto = file.response.fileName;
                this.hasFm = false;
            },
            delZm(){
                this.zmPhoto = "";
                this.hasZm = true;
            },
            delBm(){
                this.bmPhoto = "";
                this.hasFm = true;
            },
            uploadPhotoError(file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传JPG、JPEG、PNG格式的图片。'
                });
            },
		},
        components: {
            
        },
    }
</script>